<template>
  <div class="home">
    <div class="before-login" v-show="loginUser == ''">
      <button @click="login">Login</button>
      <button @click="register">Register</button>
    </div>

  </div>
</template>

<script lang="ts" setup>
 import { computed, defineComponent, onMounted, ref, watch } from 'vue';
 import {UserService} from '@/service'
 import { useRouter } from 'vue-router';
 const router = useRouter()
 const loginUser = ref('')

 function login() {
   router.push({name: 'login'})
 }

 function register() {
   router.push({name: 'register'})
 }

</script>

<style lang="scss" scoped>
 .home {
   padding: 30px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   button {
     text-transform: uppercase;
     outline: 0;
     background: #4caf50;
     width: 100%;
     border: 0;
     padding: 15px;
     margin: 15px;
     color: #ffffff;
     font-size: 14px;
     transition: all 0.3 ease;
     cursor: pointer;

     &:hover, &:active, &:focus {
       background: #43a047;
     }
   }
 }
</style>